<nz-layout>
    <nz-sider class="nz-sider" nzWidth="180px">
        <nz-list [nzBordered]="false" [nzSplit]="false" nzHeader="应用角色" nzSize="small" style="text-align: left; line-height: 1.2rem; ">
            <nz-divider style="margin: 8px 0;"/>
            <nz-list-item *ngFor="let item of roles; let i = index">
                <a class="sider-item" (click)="onRoleClick(item)" (keydown)="onRoleClick(item)" tabindex="{{i}}">{{item.roleName}}</a>
            </nz-list-item>
        </nz-list>
    </nz-sider>

    <nz-layout class="nz-right">
        @if (roleClicked) {
        <nz-content nzBordered >
            <nz-row style="align-items: center; justify-content: center;">
                <div>
                    <h4 class="content-header" style="align-items: center;">{{detailHeader}}</h4>
                </div>
            </nz-row>
            <nz-divider style="margin: 8px 0;"/>
            <nz-tabset>
                <nz-tab nzTitle="应用角色成员">
                    <app-role-users [paramSubject]="userParam"></app-role-users>
                </nz-tab>
                <nz-tab nzTitle="权限分配">
                    <app-role-permissions [roleIdSubject]="roleId"></app-role-permissions>
                </nz-tab>
                <nz-tab nzTitle="角色组">
                    <app-role-groups [roleIdSubject]="roleId"></app-role-groups>>
                </nz-tab>
            </nz-tabset>
        </nz-content>
    } @else {
        <nz-content style="text-align: center; ">
            <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
            <span >请选择角色</span>
        </nz-content>
    }
    </nz-layout>
</nz-layout>